<template>
  <div class="contain">
    <el-card>
      <div class="Winter">
        <div
          class="all"
          :style="{backgroundImage:'url('+ag+')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}"
        >2020年冬训期阶段</div>
      </div>
      <div class="wintertime">
        <div>
          <span>时间:</span>
          <span></span>
        </div>
        <div>
          <span>周期:</span>
          <span></span>
        </div>
        <div>
          <span>强度:</span>
          <span></span>
        </div>
      </div>
      <div class="wintertime">
        <div>
          <span>训练地点:</span>
          <span></span>
        </div>
        <div>
          <span>领队:</span>
          <span></span>
        </div>
        <div>
          <span>主教练:</span>
          <span></span>
        </div>
      </div>
      <div class="wintertime">
        <div>
          <span>专项训练:</span>
          <span></span>
        </div>
        <div>
          <span>体能训练:</span>
          <span></span>
        </div>
        <div>
          <span>队医:</span>
          <span></span>
        </div>
      </div>
    </el-card>
    <el-card class="winterstyle">
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >{{tag}}</el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增小组</el-button>
    </el-card>
    <el-card class="winterstyle">
      <el-form :model="form" :inline="true">
        <el-form-item label="天气：">
          <el-input size="mini" v-model="form.tq"></el-input>
        </el-form-item>
        <el-form-item label="风速：">
          <el-input size="mini" v-model="form.fs"></el-input>
        </el-form-item>
        <el-form-item label="气温：">
          <el-input size="mini" v-model="form.qw" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="场地因素：">
          <el-input size="mini" v-model="form.cd"></el-input>
        </el-form-item>
      </el-form>
      <div class="classhours">本节课次浆频要求:</div>
      <div class="classhours">本节课次心率要求:</div>
      <div class="channel">
      <div  v-for="(item,index) in totallist" :key="index">
        <el-form :model="form" :inline="true">
        
            <div class="firsthd"
              :style="{backgroundImage:'url('+name+')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}"
            >{{item.label}}</div>
            <el-select size="mini" v-model="hd" placeholder="航道选择">
              <el-option></el-option>
            </el-select>
            <div class="Kilometers">
              <el-form-item label="公里数：">
                <el-input size="mini" v-model="form.cd" style="width:117px;"></el-input>
              </el-form-item>
            </div>
            <div > 
                <el-form-item label="分段：" class="Kilometers">           
                    <el-input-number  
                    size="mini"
                    v-model="num"
                    controls-position="right"                 
                    :max="10">
                    ></el-input-number> 
                </el-form-item>          
            </div>          
        </el-form>
      </div>
      </div>
    </el-card>
  </div>
</template>
         
<script>
export default {
  data() {
    return {
      ag: require("@/assets/image/background-image.png"),
      cg: require("@/assets/image/han.png"),
      dynamicTags: ["第1组", "第2组", "第3组"],
      inputVisible: false,
      inputValue: "",
      form: {
        tq: "",
        fs: "",
        qw: "",
        cd: "",
      },
      hd: "",
      gl: "",
      totallist:[
         {label:"第一航道",name:require("@/assets/image/background-image.png")},{label:"第二航道",name:require("@/assets/image/channel-2.png")},{label:"第三航道"},{label:"第四航道"},{label:"第五航道"},{label:"第六航道"}
      ],
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput(tag) {
      this.dynamicTags.push(`第${this.dynamicTags.length + 1}组`);
    },
  },
};
</script>
<style scoped>
.contain {
  padding: 30px;
}
.all {
  width: 336.5px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 0 auto;
}
.Winter {
  text-align: center;
  margin-bottom: 30px;
}
.wintertime {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.wintertime span {
  font-size: 14px;
  color: rgba(119, 119, 119, 1);
}
.winterstyle {
  margin-top: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.sprinter {
  display: flex;
  justify-content: space-around;
}
.classhours {
  font-size: 14px;
  color: rgba(119, 119, 119, 1);
  margin-top: 30px;
}
.channel {
  display: flex;
  justify-content: space-around;
}
.firsthd{
    text-align: center;
}

</style>